<template>
  <div id="building">
    <div class="welcome">
      <h1>So glad you're here!</h1>
    </div>
    <div class="in">
      <span class="e"
        ><router-link to="/uregister"
          ><strong>用户注册 |</strong></router-link
        ></span
      >
      <span class="p"
        ><router-link to="/wregister"
          ><strong>跑腿员注册</strong></router-link
        ></span
      >
      <el-form :model="form" :rules="rules" ref="userForm" label-width="120px" >
        <el-form-item label="用户名"  prop="username">
          <el-input v-model="form.username"  placeholder="请输入您的用户名" />
        </el-form-item>
        <el-form-item label="姓名"  prop="name">
          <el-input v-model="form.name" placeholder="请输入您的性名" />
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-select v-model="form.sex" placeholder="请选择您的性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码"  prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入您的密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="生日"  prop="birthday">
          <div class="demo-date-picker">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="请选择您的出生日期"
              :size="size"
            />
          </div>
        </el-form-item>
        <el-form-item label="手机号"  prop="phonenum" >
          <el-input
            v-model="form.phonenum"
            @input="form.phonenum = form.phonenum.replace(/^(0+)|[^\d]+/g, '')"
            maxlength="11"
            placeholder="请输入您的手机号码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="submit" @click="uregister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getApi, deleteApi, postApi, updateApi } from "@/util/api";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        phonenum: "",
        sex: "",
        name: "",
        birthday: "",
      },
      isnull: false,
        rules: {
        phonenum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
        username:[
          { required: true, message:"请输入用户名", trigger: "blur"},
          { min:5,max:12,message:"长度在 5 到 12个字符",trigger: "blur"}
        ],
        password:[
          { required: true, message:"请输入密码", trigger: "blur"},
          { min:6,message:"密码长度大于 6 个字符",trigger: "blur"}
        ],
        name:[
          { required: true, message:"请输入名字", trigger: "blur"},
        ],
        sex:[
           { required: true, message:"不提供无性别选项", trigger: "blur"},
        ],
       } 
    };
  },

  methods: {
    uregister() {
      if (this.form.username == "") {
        this.$message.error("用户名不能为空");
      } else if (this.form.password == "") {
        this.$message.error("密码不能为空");
      } else {
        this.$refs['userForm'].validate((valid)=>{
          if(valid){
            postApi("users/register", {
          /* params: { */
          name: this.form.name,
          password: this.form.password,
          phonenum: this.form.phonenum,
          sex: this.form.sex,
          username: this.form.username,
          birthday: this.form.birthday,
          /*  } */
        })
          .then((res) => {
            // console.log(res.data.message);
            if (res.data.code == 1) {
              this.$alert("是否返回登录页面", "注册成功", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$router.push("/login");
                },
              });
            } else if (res.data.code == -1) {
              this.$alert("用户名已存在", "注册失败", {
                confirmButtonText: "确定",
                callback: (action) => {
                  (this.form.username = ""), 
                  (this.form.password = "");
                },
              });
            } else {
              console.log(res.data);
              console.log(this.form);
            }
          })
          .catch((err) => {
            console.log("操作失败" + err);
          });
          }
          else{
            return false;
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#building {
  background: url("../assets/img/w2.webp");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  //background-size:contain;
}
.in {
  border: 1px solid #dccfcf;
  width: 350px;
  margin: 115px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
  .e {
    font-size: 28px;
    padding-left: 20%;
  }
  .p {
    font-size: 28px;
    padding-left: 6px;
  }
}
.welcome {
  text-align: center;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>